<template>
	<view class="wrap">
		<view class="wrap__header">
			<uni-icons type="left" size="24" color="#fff" @click="backClick"></uni-icons>
			<text class="header__title">{{$t('pick.title')}}</text>
			<image src="@/static/icons/history.png" mode="widthFix" class="header__icon" @click="goOutMoneyHistory"></image>
		</view>
		<view class="wrap__option">
			<view class="option__item">
				<view class="item__title">{{$t('pick.type')}}</view>
				<view class="item__main">
					<text class="main__title">{{$t('pick.amount')}}</text>
					<picker mode="selector" :range="typeOptions" @change="typeChange" range-key="label" style="width:100%;">
						<view class="main__value main__type" v-if="typeOptions[typeIndex]">
							<text class="value__title">{{typeOptions[typeIndex].label}}</text> 
							<uni-icons type="bottom" size="20" color="#fff"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('pick.apply')}}</view>
				<view class="item__main item__border">
					<text class="main__title">{{$t('pick.account')}}：</text>
					<view class="main__tips" @click="isShowBind=true">
						<text class="tips__text">{{bankInfo.bank_name || ""}}</text>
						<uni-icons type="right" size="20" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="item__main item__border">
					<text class="main__title">{{$t('pick.pickAmount')}}：</text>
					<view class="main__value1">
						<!-- {{ amount }} -->
						<input style="width: 100%;height: 100%;" v-model="amount"/>
						<!-- <uni-number-box v-model="amount" :max="maxAmount" :min="minAmount" background="#458EF4" color="#fff"/> -->
					</view>
				</view>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('pick.limit')}}</view>
				<view class="item__main">
					<text class="main__title">{{$t('pick.min')}}：</text>
					<view class="main__right">{{minAmount}}</view>
				</view>
				<view class="item__main">
					<text class="main__title">{{$t('pick.max')}}：</text>
					<view class="main__right">{{maxAmount}}</view>
				</view>
				<view class="item__btn">
					<text class="btn__text" @click="subClick">{{$t('trade.buySubBtn')}}</text>
				</view>
			</view>
		</view>
		<!-- 提取彈窗 -->
		<pickerCash v-if="isShowCashTips" :isShowCashTips.sync="isShowCashTips"></pickerCash>
		<!-- 绑定银行弹窗 -->
		<bindBank v-if="isShowBind" :isShowBind.sync="isShowBind" @bindHandle="bindHandle"></bindBank>
	</view>
</template>

<script>
	import pickerCash from '@/components/trade/pickerCashTips.vue'
	import bindBank from '@/components/trade/bindBank.vue'
	export default{
		components:{
			pickerCash,
			bindBank
		},
		data(){
			return {
				isShowCashTips:false,
				maxAmount:0,
				minAmount:0,
				amount:0,
				typeOptions:[], // 账户类型选项
				typeIndex:0, // 账户类型索引
				remarkInfo:"", //
				isShowBind:false, 
				bankInfo:{}, //银行信息
				changeID:''
			}
		},
		onLoad(options) {
			this.changeID = 1
			// 获取提取资金信息
			this.getWithdrawaInfo()
		},
		methods:{
			goOutMoneyHistory(){
				uni.navigateTo({
					url:'/pages/trade/outMoney'
				})
			},
			// 获取提取资金信息
			async getWithdrawaInfo(){
				let res = await this.$api.getWithdrawaInfo(this.changeID)
				if(res.code === 1 && res.data){
					let {max_anount, min_anount} = res.data.amount_range
					this.maxAmount = max_anount * 1
					this.minAmount = min_anount * 1
					this.amount = this.minAmount
					this.typeOptions = res.data.class.map(item=>{
						item.label = `${item.file}: ${item.amount || 0}`
						return item
					})
					this.remarkInfo = res.data.remark
				}
			},
			// 类型切换
			typeChange(e){
				let {value} = e.detail
				
				this.typeIndex = value
				
				this.changeID = value+1
				this.getWithdrawaInfo()
			},
			// 绑定成功
			bindHandle(info){
				this.bankInfo = info
			},
			// 提交出金
			async subClick(){
				let typeInfo = this.typeOptions[this.typeIndex]
				let {id} = this.bankInfo 
				if(!id){
					uni.showToast({
						title:this.$t('exchange.accountTips'),
						icon:"none"
					})
					return
				}
				let params = {
					money: this.amount,
					category_id:typeInfo.id,
					bank_id:id
				}
				uni.showLoading({
					title:"loading...",
					mask:true
				})
				let res = await this.$api.subWithdrawal(params)
				if(res.code === 1 ){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
					// 更新用户数据
					this.$store.dispatch("user/getUserInfo")
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/trade/trade'
						})
					}, 1500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
				// this.isShowCashTips = true
			},
			backClick(){
				let canNavBack = getCurrentPages()
				// if( canNavBack && canNavBack.length>1) {  
				// 	uni.navigateBack() 
				// } else {  
				//     history.back();  
				// }
				uni.switchTab({
						url: '/pages/trade/trade',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #161827;
		&__header{
			height: 128rpx;
			background:#161827;
			@include flexRowAlign(space-between);
			padding: 0 30rpx;
			box-sizing: border-box;
			.header__title{
				flex: 1;
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
				text-align: center;
			}
			.header__icon{
				width: 42rpx;
				height: 42rpx;
				/* opacity: 0; */
			}
		}
		&__option{
			margin-top: 30rpx;
			.option__item{
				background: #161827;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.item__title{
					@include flexRowAlign();
					padding-top: 40rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					font-weight: 800;
					color: #fff;
					margin-bottom: 24rpx;
					&:before{
						content: "";
						margin-left: 10rpx;
						width: 6rpx;
						height: 30rpx;
						background: #458EF4;
						margin-right: 12rpx;
					}
					.title__text{
						font-size: 28rpx;
						color: #999999;
					}
				}
				.item__main{
					@include flexRowAlign();
					height: 98rpx;
					.main__title{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
						flex-shrink: 0;
					}
					.main__right{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
					}
					.main__tips{
						text-align: right;
						color: #fff;
						flex: 1;
						.tips__text{
							margin-right: 30rpx;
						}
					}
					.main__icon{
						width: 30rpx;
						height: 30rpx;
						margin-left: 20rpx;
					}
					.main__value{
						flex: 1;
					  @include flexRowAlign();
						margin-left: 50rpx;
						::v-deep .uni-numbox__value{
							width: 230rpx;
							height: 68rpx;
						}
						.value__input{
							color: #161827;
							font-size: 30rpx;
						}
					}
					.main__value1{
						width: 360rpx;
						height: 80rpx;
						background-color: #458EF4;
						border-radius: 10rpx;
						color: white;
						text-align: center;
						line-height: 80rpx;
					}
					.main__type{
						justify-content: flex-end;
						.value__title{
							font-size: 32rpx;
							font-weight: 500;
							color: #fff;
							margin-right: 50rpx;
						}
					}
					.main__picker{
						flex: 1;
						@include flexRowAlign(flex-end);
					}
				}
				.item__border{
					// border-top: 1rpx solid #EEEEEE;
				}
				.item__btn{
					margin-top: 40rpx;
					padding-bottom: 60rpx;
					@include flexRowAlign(center);
					.btn__text{
						@include flexCenter();
						width: 600rpx;
						height: 98rpx;
						background: #458EF4;
						border-radius: 12rpx;
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>